<template>
    <div class="main">
        <section>
            <div v-if="rightsButtons['add']" class="btn-block">
              <el-button type="success" size="small" icon="el-icon-circle-plus" plain @click="showAdd">新建</el-button>
            </div>
            <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search"/>
            <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
                <el-table-column align="center" label="platform" prop="platform" fixed ></el-table-column>
                <el-table-column align="center" label="渠道名称" prop="channelName"></el-table-column>
                <el-table-column align="center" label="版本号"  prop="versions">
                </el-table-column>
                <el-table-column align="center" label="IOS下载链接" prop="downIosUrl"></el-table-column>
                <el-table-column align="center" label="ANDROID下载链接" prop="downAndroidUrl"></el-table-column>
                <el-table-column align="center" label="更新时间"  prop="updateTime"></el-table-column>
                <el-table-column align="center" label="操作"  fixed="right" v-if="rightsButtons['edit']">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="$router.push({ name: 'channelPackageEdit', params: { id: scope.row.id, channerData:scope.row,listQuery: listQuery }})">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    v-if="paginationShow"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
            <el-dialog title="新建渠道" :visible.sync="dialogVisible">
                <el-form :model="formData" size="medium" ref="form" label-width="120px">
                    <el-form-item label="platform:" prop="platform" :rules="commonRules.notNullRule">
                        <el-input v-model="formData.platform" placeholder="platform"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>
<script>
    import SearchForm from '@/components/searchForm'
    export default {
      name: 'channelPackage',
      components: {
        SearchForm
      },
      data(){
        return {
          listQuery: {
            platform:'',
            channelName: '',
            pageIndex: 1,
            pageSize: 10
          },
          queryConfig: [
            {
              prop: 'platform',
              type: 'input',
              label: 'platform'
            },
            {
              prop: 'channelName',
              type: 'input',
              label: '渠道名称'
            }
          ],
          listLoading: true,
          list: [],
          listTotal: 0,
          paginationShow: false,
          dialogVisible: false,
          btnLoading: false,
          formData: {
            platform:''
          }
        }
      },
      mounted(){
        // this.listQuery = this.getLocalQuery(this.listQuery, 'welfareIndex');
        this.getList();
      },
      beforeRouteEnter (to, from, next) {
        next(vm => {
            if (from.name==='channelPackageEdit') {
              if(vm.$route.params.listQuery){
                vm.listQuery = vm.$route.params.listQuery
              }else{
                vm.listQuery={
                  platform:'',
                  channelName: '',
                  pageIndex: 1,
                  pageSize: 10
                }
              }
              console.log(vm.listQuery)
              vm.getList()
            }
        })
      },
      methods: {
        getList(){
          this.listLoading = true
          this.request({
            url: '/bsnl-product/platform/list',
            method: 'post',
            data: this.listQuery
          }).then((res) => {
            this.list = res.data;
            this.listTotal = res.totalCount;
            this.listLoading = false;
            this.paginationShow = true
          }).catch(err => {
            console.log(err);
            this.list = [];
            this.listTotal = 0;
            this.listLoading = false;
            this.paginationShow = true
          });
        },
        search () {
          this.listQuery.pageIndex = 1;
          this.getList();
        },
        handleSizeChange (value) {
          this.listQuery.pageSize = value;
          this.getList();
        },
        handleCurrentChange (value) {
          this.listQuery.pageIndex = value;
          this.getList();
        },
        showAdd(){
          this.formData = {
              platform:''
          };
          this.$nextTick(()=>{
            this.$refs.form.clearValidate()
          });
          this.dialogVisible = true;
          this.btnLoading = false;
        },
        save(){
          this.$refs.form.validate(valid => {
            if (!valid) {
              return false;
            }
            this.btnLoading = true;
            this.request({
              url: '/bsnl-product/platform/save',
              method: 'post',
              data: this.formData
            }).then(() => {
              this.btnLoading = false;
              this.dialogVisible = false;
              this.$message.success('新建成功');
              this.getList();
            }).catch(err => {
              this.btnLoading = false;
            });
          });
        }
      }
    }
</script>
